<template>
	<van-tabbar v-model="active" v-show="show" :placeholder="show" :route="true" fixed>
		<van-tabbar-item v-for="(item, index) in tabbarData" :key="index" :icon="item.icon" :to="item.to">
			{{ item.title }}
		</van-tabbar-item>
	</van-tabbar>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { tabbarRoutes } from "/@/router/routes";

interface TabbarProps {
	show?: boolean;
}
withDefaults(defineProps<TabbarProps>(), {
	show: true,
});

const active = ref(0);
const tabbarData = tabbarRoutes.map(item => {
	return {
		icon: item.meta.icon || "thumb-circle-o",
		title: item.meta.title,
		to: {
			name: item.name,
		},
	};
});
</script>

<style scoped lang="less">
:deep(.van-tabbar) {
	max-width: 100vw;
}
</style>
